<template>
  <div class="wodeG">
    <el-card class="update-log">
      <el-tabs
        :style="{ width: '80%', marginLeft: '5%' }"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane name="0">
          <span slot="label" class="fontClass">待受理</span>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="180">
              <template slot-scope="scope">
                <!-- 注意：这个地方要传参数进去才能进行操作  函数名称(scope.row) -->
                <div @click="alertMessage(scope.row)" class="go">
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="提交人" width="100"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="180">
            </el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="180">
            </el-table-column>

            <el-table-column prop="status" label="状态" width="100"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label" class="fontClass">待用户反馈</span>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="180">
              <template slot-scope="scope">
                <!-- 注意：这个地方要传参数进去才能进行操作  函数名称(scope.row) -->
                <div @click="alertMessage(scope.row)" class="go">
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="提交人" width="100"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="180">
            </el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="160">
            </el-table-column>

            <el-table-column prop="status" label="状态" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label" class="fontClass">已关闭</span>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="180">
              <template slot-scope="scope">
                <!-- 注意：这个地方要传参数进去才能进行操作  函数名称(scope.row) -->
                <div @click="alertMessage(scope.row)" class="go">
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="提交人" width="100"></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width="180">
            </el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="180">
            </el-table-column>

            <el-table-column prop="status" label="状态" width="100"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dataList } from "@/api/system/order/index";
export default {
  name: "Profile",
  data() {
    return {
      activeName: "0",
      tableData: [],
      // 总条数
      total: 0,
      currentPage4: 1,
      queryParams: { pageNum: 1, pageSize: 10 },
    };
  },
  mounted() {
    this.getList();
  },
  /* created() {
    this.getList();
  }, */
  watch: {
    $route(to, from) {
      if (from.fullPath == "/order/addorder" || from.fullPath == "/order/orderdetail") {
        this.getList();
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    getList() {
      let params = {
        status: this.activeName,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      dataList(params).then((res) => {
        if (res.code == 200) {
          this.total = res.total;
          this.tableData = res.rows;
          this.tableData.map((item) => {
            if (item.urgencyLevel == 0) {
              item.urgencyLevel = "问题咨询";
            } else {
              item.urgencyLevel = "报障";
            }
            if (item.status == 0) {
              item.status = "待受理";
            } else if (item.status == 1) {
              item.status = "待用户反馈";
            } else {
              item.status = "已关闭";
            }
          });
        }
      });
    },
    alertMessage(row) {
      this.$router.push({
        name: "Orderdetail",
        params: { row },
      });
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.go {
  cursor: pointer;
  color: cornflowerblue;
}
.pagination-container {
  width: 80%;
  background: #fff;
  // background-color: pink;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
.fontClass {
  font-size: 14px;
}
</style>
